<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>下拉菜单</title>
    <style>
        * {
            font-family: '微软雅黑';
        }
        
        .dropdown {
            display: inline-block;
        }
        
        .dropdown .dropbtn {
            background: dodgerblue;
            color: white;
            padding: 10px;
            cursor: pointer;
            border: none;
            font-size: 100%;
        }
        
        .dropdown:hover .dropbtn {
            background: royalblue;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            background: #f9f9f9;
            z-index: 1;
        }
        /*下拉菜单的链接*/
        
        .dropdown-content a {
            display: block;
            text-decoration: none;
            padding: 10px;
            color: dimgray;
        }
        
        .dropdown-content a:hover {
            background: #f1f1f1;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .static{
            position: static;            
        }
        
        .relative {
            position: relative;
        }
        
        .float {
            float: right;
        }
        
        .right {
            right: 0px;
        }
    </style>
</head>

<body>
    <h2>position: static</h2>
    <div class="dropdown static">
        <button class="dropbtn">Drop down</button>
        <div class="dropdown-content">
            <a href="">SOBER</a>
            <a href="">HOW GEE</a>
            <a href="">ZUTTER</a>
            <a href="">BLUE</a>
            <a href="">LOVE SONG</a>
        </div>
    </div>
    <h2>position: relative</h2>
    <div class="dropdown relative">
        <button class="dropbtn">Drop down</button>
        <div class="dropdown-content">
            <a href="">SOBER</a>
            <a href="">HOW GEE</a>
            <a href="">ZUTTER</a>
            <a href="">BLUE</a>
            <a href="">LOVE SONG</a>
        </div>
    </div>

    <div style=" right: 10px; top: 0px;">
        <h2 style="direction: rtl">position: static</h2>
        <div class="dropdown float static">
            <button class="dropbtn">Drop down</button>
            <div class="dropdown-content right">
                <a href="">SOBER</a>
                <a href="">HOW GEE</a>
                <a href="">ZUTTER</a>
                <a href="">BLUE</a>
                <a href="">LOVE SONG</a>
            </div>
        </div>
        <div style="clear: both"></div>
        <h2 style="direction: rtl">position: relative</h2>
        <div class="dropdown float relative">
            <button class="dropbtn">Drop down</button>
            <div class="dropdown-content right">
                <a href="">SOBER</a>
                <a href="">HOW GEE</a>
                <a href="">ZUTTER</a>
                <a href="">BLUE</a>
                <a href="">LOVE SONG</a>
            </div>
        </div>
    </div>
</body>

</html>